<template>
  <el-dialog title="选择巡更点位" :visible.sync="show" append-to-body :close-on-click-modal="false" width="800px" @closed="closed">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline :class="{ disabled: disableAction }" style="margin-top: -20px" @submit.native.prevent>
      <el-form-item prop="spotName">
        <el-input v-model.trim="queryParams.spotName" placeholder="请输入点位名称" clearable @keyup.enter.native="handleQuery" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="openAddSpot" v-if="showBtns.add">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="table" v-loading="listLoading" :data="list" size="small" height="calc(88vh - 250px)" :row-style="{ cursor: 'pointer' }" @row-click="rowClick" @selection-change="onSelect">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="点位编码" prop="spotCode" min-width="70" />
      <el-table-column label="点位名称" prop="spotName" show-overflow-tooltip min-width="200" />
      <el-table-column label="负责人" prop="principalNames" show-overflow-tooltip min-width="100" />
      <el-table-column label="点位状态" align="center" width="100">
        <el-tag slot-scope="{ row }" size="small" :type="row.status ? 'primary' : 'info'">{{ row.status ? '启用' : '禁用' }}</el-tag>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <div slot="footer">
      <span v-if="selected.length" style="font-size: 14px; color: #606266; margin-right: 20px"> 已选择 {{ selected.length }} 项 </span>
      <el-button type="primary" :disabled="listLoading || !selected.length" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="disableAction" @click="show = false">取 消</el-button>
    </div>

    <EditSpot ref="EditSpot" v-model="showEditSpot" @ok="getList" />
  </el-dialog>
</template>
<script>
// 选择巡更点位
import auth from '@/plugins/auth'
import { debounce } from '@/utils'
import { getSpot } from '@/api/cq/patrol'
import EditSpot from './EditSpot'
export default {
  components: { EditSpot },
  data() {
    return {
      show: false,
      listLoading: false,
      total: 0,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: '',
        patrolTypeId: '',
        spotName: '',
        status: '1'
      },
      showEditSpot: false,
      selected: []
    }
  },
  computed: {
    disableAction() {
      return this.listLoading
    },
    showBtns() {
      const permCode = 'cq:patrol:spot'
      const add = auth.hasPermi(`${permCode}:add`)
      return { add }
    }
  },
  created() {
    this.btnSubmit = debounce(this.onSubmit, 1e3, true)
  },
  methods: {
    closed() {
      this.listLoading = false
      this.list = []
      this.resetForm('queryForm')
    },
    open({ projectId, patrolTypeId }) {
      if (!projectId) return this.$message.error('参数错误：项目ID不能为空')
      this.show = true
      this.queryParams.projectId = projectId
      this.queryParams.patrolTypeId = patrolTypeId || ''
      this.getList()
    },
    async getList() {
      const opt = { ...this.queryParams }
      this.listLoading = true
      const res = await getSpot(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return (this.list = [])

      const data = res.rows || []
      data.map(i => {
        const builders = i.cqPatrolSpotBuilderList || []
        i.cqPatrolSpotBuilderList = builders
        i.principalNames = builders.map(r => r.userNickName).join(',')
      })
      this.list = data
      this.total = res.total || 0
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    onSelect(val) {
      this.selected = val
    },
    openAddSpot() {
      const { projectId, patrolTypeId } = this.queryParams
      const data = {
        projectId,
        patrolTypeId: patrolTypeId || null
      }
      this.$refs.EditSpot.open(data)
    },
    onSubmit() {
      this.$emit('selected', JSON.parse(JSON.stringify(this.selected)))
      this.show = false
    }
  }
}
</script>
